html {
  height: 100% ;
}

html,body {
  font-family: "Source Sans Pro",Verdana;
  color: hsla(200,10%,90%,.8);
  margin: 0px;

  -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
}

body {
/*  background: linear-gradient(135deg, hsl(200,35%,16%), hsl(200,20%,11%));*/
  background: hsl(200,30%,15%);
}

header {
  font-size: 20px;
  color: #FFF;
  margin-bottom: 20px ;
}

h3 {
  margin-top: 0 ;
}

.headerdiv {
  margin-left: 20px ;
  margin-top: 14px;
  font-family: "Source Sans Pro";
  text-align: center ;
}

.headerdiv img {
  width: 200px ;
  margin: 20px 0 ;
}

.content {
  padding: 40px ;
}

.section-content {
  text-align: center ;
  display: none ;
}

.section-content h2 {
  text-align: center ;
  margin-top: 80px ;
}

#projects {
  clear: both ;
}

.projectbox {
  display: inline-block ;
  margin: 10px ;
  padding: 10px ;
  font-size: 18px;
  text-align: center ;
  vertical-align: top ;
  border-radius: 10px ;
  background: rgba(255,255,255,.1);
}

.projectbox .icon {
  display: inline-block;
  width: 72px ;
  height: 72px;
  border-radius: 10px ;
  background: hsl(200,50%,50%);
}

.projectbox .title {
  text-align: center ;
  font-family: "Ubuntu" ;
  margin-top: 10px ;
  text-shadow: 0 0 3px #000 ;
}

.projectbox a {
  text-decoration: none ;
}

.projectbox .appicon {
  display: inline-block ;
  width: 120px ;
  vertical-align: top ;
  text-align: left ;
}

.projectbox .appicon div img {
  width: 72px ;
  height: 72px ;
  border-radius: 5px ;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
  box-shadow: 0 0 5px #000 ;
  background: #000;
}

.projectbox .buttons {
  display: inline-block ;
  vertical-align: top ;
  text-align: left ;
}

.projectbox .buttons a {
  font-size: 14px ;
  border-radius: 5px ;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: hsl(200,50%,40%);
  display: block ;
  box-shadow: 0 0 5px #000 ;
}

.projectbox .buttons a i {
  margin-right: 5px ;
}

.projectbox .buttons a.runbutton {
  background: hsl(160,50%,40%);
}

@media screen and (max-device-width: 800px) {
  .projectbox .buttons a span {
    display: none ;
  }
  .projectbox .buttons a i {
    margin-right: 0 ;
  }
}

a {
  color: #FFF;
}
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#canvaswrapper {
  text-align: center ;
}

.profile_image {
  display: inline-block ;
  margin-right: 40px ;
  border-radius: 64px ;
  vertical-align: middle ;
}

.username {
  display: inline-block ;
  font-size: 36px ;
  margin-bottom: 10px ;
  vertical-align: middle ;
}

.description {
  margin-top: 40px ;
}

.sections {
  margin: 40px 0 ;
  text-align: center ;
}

.sections div {
  border-radius: 30px ;
  background: rgba(255,255,255,.1) ;
  display: inline-block ;
  margin: 10px 20px 10px 0 ;
  padding: 10px 20px ;
  cursor: pointer ;
}

.sections div.selected {
  border-radius: 30px ;
  background: rgba(255,255,255,.9) ;
  color: rgba(0,0,0,.9);
}


#user-progress-statistics, #user-progress-level {
  text-align: center ;
  padding: 20px 0 ;
  margin-bottom: 40px ;
}

.user-progress-stat {
  display: inline-block ;
  padding: 20px 40px ;
  text-align: center ;
}
.user-progress-stat .unit {
  font-size: 10px ;
  color: rgba(255,255,255,.5);
  position: absolute ;
  margin-left: 5px ;
  top: 29px ;
}

#user-progress-level .user-progress-stat {
  background: hsl(160,50%,40%) ;
  border-radius: 5px ;
  margin: 5px 20px ;
  width: 200px ;
}

.user-progress-stat-value {
  font-size: 40px ;
  position: relative ;
  display: inline-block ;
}
.user-progress-stat-label {
  font-size: 16px ;
  font-weight: bold ;
  color: rgba(255,255,255,.5) ;
}

#number-of-achievements {
  margin-left: 10px ;
  color: rgba(255,255,255,.5);
  font-size: 16px ;
}

.user-progress-achievement {
  background: rgba(255,255,255,.1) ;
  padding: 20px 20px 0 20px ;
  margin: 2px 10px 0 0 ;
  text-align: left ;
}
.user-progress-achievement img {
  float: left ;
  width: 96px ;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
  margin: 0 20px 20px 0 ;
}
.user-progress-achievement .story {
  font-style: italic ;
  color: rgba(255,255,255,.5) ;
}
.user-progress-achievement .bonus {
  float: right ;
  background: hsl(300,30%,40%) ;
  font-size: 16px ;
  padding: 4px 15px ;
  border-radius: 30px ;
  color: rgba(255,255,255,.75);
}
.user-progress-achievement .date {
  float: right ;
  font-size: 16px ;
  padding: 4px 15px ;
  border-radius: 30px ;
  font-weight: bold ;
  color: hsla(200,100%,80%,.5);
}
